<template>
    <view class="page-invitation-list">
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="search-sticky">
				<u-row gutter="0">
					<u-col span="4" v-for="(item,index) in tab.list" :key="index">
						<view class="text-center">
                            <view class="inline-block" :class="tab.current == index ? 'current' : ''" @click="changeTab(index)">
                                <text class="name">{{ item.name }}</text>
                            </view>
                        </view> 
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view class="p-4" v-if="tab.list[tab.current].records.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view> 
		<view class="list">
			<view class="fly-cell" v-for="(item,index) in tab.list[tab.current].records" :key="index">
				<view class="content">
					<view v-if="tab.current == 0">
						<!-- <fly-info label="体验卡码" :value="item.experienceCardId"></fly-info> -->
						<fly-info label="体验时间" :value="item.days +'天'"></fly-info>
						<fly-info label="过期时间" :value="'截止'+item.finalValidity"></fly-info>
						<fly-info label="剩余次数" :value="item.remainingQuantity + '次'"></fly-info>
					</view>
					<view v-else>
						<fly-info label="体验卡码" :value="item.cardId"></fly-info>
						<fly-info v-if="tab.current == 1" label="使用者" :value="item.issuedUserId"></fly-info>
						<fly-info label="发送时间" :value="item.createTime"></fly-info>
						<!-- <fly-info label="剩余次数" :value="item.remainingQuantity + '次'"></fly-info> -->
					</view>
				</view>
				<view class="value">
					<u-button v-if="tab.current == 0" class="btn-cyan" size="medium" @click="sendInvitationCode(item)">发送</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="popup.isShow" mode="center" border-radius="14" closeable width="480">
			<view class="text-center p-4">
				<view class="my-8">体验卡：<text class="font-bold">{{ popup.cardId }}</text></view>
				<!-- <view class="flex-between"> -->
					<u-button class="btn-cyan inline-block" open-type="share">发送给好友</u-button>
				<!-- </view> -->
			</view>
		</u-popup>
    </view>
</template>
<script setup lang="ts">
import FlyInfo from '@/components/FlyInfo';
import {onShow, onPullDownRefresh, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let tab = reactive({
	current: 0,
	list:[
		{id:0, name: '可发送', records: [], current: 1, size: 10, total:0, api: '/admin/guildInvitation/xcxPage'},
		{id:1, name: '已使用', records: [], current: 1, size: 10, total:0, api: '/admin/userCode/xcxPage'},
		{id:2, name: '已过期', records: [], current: 1, size: 10, total:0, api: '/admin/userCode/xcxPage'},
	],
	experienceCardId: null,
});
let popup = reactive({
	isShow: false,
	days: null,
	cardId: null,
})

const changeTab = (i) => {
	tab.current = i;
    if(tab.list[tab.current].records.length == 0){
        getList('refresh');
    }
}
const getList = (type) => {
    let obj = tab.list[tab.current];
      if(type == 'refresh'){  
        obj.current = 1;
        obj.records = [];
      }else{
        if(obj.total > obj.records.length){
          obj.current ++;        
        }else{
          uni.showToast({title:'没有更多了',icon: 'none'});
          return;
        }
      };
      let params = {
        current: obj.current,
        size: obj.size,
        status: obj.id,
        // status: 0,
      };
      proxy.$http('get', obj.api, proxy.$util.getParam(params) ,(data,msg) => {
        obj.records = obj.records.concat(data.records);
        obj.total = data.total;
      },msg => {

      })
};
const sendInvitationCode = (item) => {
	popup.days = item.days;
	proxy.$http('post', '/admin/userCode/addSave/' + item.experienceCardId, {}, (data,msg) => {
		popup.cardId = data.cardId;
		popup.isShow = true;
		getList('refresh');
		// proxy.$util.gotoPage('/packageB/invitation/detail', {invitationCode: data.invitationCode});
	});
};
onShareAppMessage((option) =>{
	return {
		title: '赠送你'+popup.days+'天读书会会员',
		path: 'pages/register/index?cardId='+ popup.cardId,
		imageUrl: proxy.$icon.banner
	}
});
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onShow(() => {
	getList('refresh');
})
</script>